<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>菜单管理</title>
    <script type="text/javascript" src="../js/vue.js" ></script>
    <script type="text/javascript" src="../js/axios.min.js" ></script>
    <!--导入样式-->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!--导入组件-->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
</head>
<style>


    .el-tree-node__content{
        height:35px;
    }

    .button1{
        margin-left:900px;
    }


</style>
</head>

<body>
<div id="app">
    <h2>{{ message }}</h2>
</div>


<div id="tableView">
<!--新增按钮-->
    <el-row>
        <el-form :inline="true" :model="searchForm" class="demo-form-inline">
            <el-form-item>
                <el-button plain="true" type="primary" icon="plus" @click="addOneMenuClick">新增一级菜单</el-button>
            </el-form-item>
        </el-form>
    </el-row>
    <div class="custom-tree-container">
        <div class="block">
            <el-tree
                    :data="dataTree"
                    node-key="id"
                    props="defaultProps" accordion
                    @node-click="handleNodeClick"
                    :expand-on-click-node="false">
             <!--   <el-tree :data="treedata" :props="defaultProps" accordion  @node-click="handleNodeClick "></el-tree>-->
      <span class="custom-tree-node" slot-scope="{ node, data }">
        <span>{{ node.label }}</span>

        <span class="button1">

          <el-button v-if="data.pid===0" :plain="true" type="success" size="mini" icon="add"  @click="() => append(data)">添加子项目</el-button>
          <el-button class="button2" :plain="true" type="warning" size="mini" icon="edit" @click="() => editClick(data)">修改</el-button>
          <el-button :plain="true" type="danger" size="mini" icon="delete" @click="() => remove(node, data)">删除</el-button>

        </span>

      </span>
            </el-tree>
        </div>
    </div>
    <!-- 新增一级菜单 -->
    <el-dialog title="编辑" :visible.sync="editFormVisible" :close-on-click-modal="false">
        <el-form :model="editForm" label-width="80px" :rules="editFormRules" ref="editForm">
            <el-form-item label="一级菜单" prop="name">
                <el-input v-model="editForm.name" auto-complete="off"></el-input>
            </el-form-item>

        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click.native="editFormVisible = false">取消</el-button>
            <el-button type="primary" @click.native="editSubmit" :loading="editLoading">提交</el-button>
        </div>
    </el-dialog>


    <!-- 添加子项目 -->
    <el-dialog title="添加子项目" :visible.sync="editFormVisible2" :close-on-click-modal="false">
        <el-form :model="editForm" label-width="80px" :rules="editFormRules" ref="editForm">
            <el-form-item label="pid" prop="pid" >
                <el-input v-model="editForm.pid" auto-complete="off" disabled></el-input>
            </el-form-item>
            <el-form-item label="菜单" prop="name">
                <el-input v-model="editForm.name" auto-complete="off"></el-input>
            </el-form-item>
        <!--    <el-form-item label="菜单路径" prop="url">
                <el-input v-model="editForm.url" auto-complete="off"></el-input>
            </el-form-item>-->
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click.native="editFormVisible2 = false">取消</el-button>
            <el-button type="primary" @click.native="editSubmit" :loading="editLoading">提交</el-button>
        </div>
    </el-dialog>


<!--修改菜单-->
    <el-dialog title="修改" :visible.sync="editFormVisible3" :close-on-click-modal="false">
        <el-form :model="editForm1" label-width="80px" :rules="editFormRules" ref="editForm1">

            <el-form-item label="菜单" prop="name">
                <el-input v-model="editForm1.name" auto-complete="off"></el-input>
            </el-form-item>
           <!-- <el-form-item label="菜单路径" prop="url">
                <el-input v-model="editForm.url" auto-complete="off"></el-input>
            </el-form-item>-->
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click.native="editFormVisible3 = false">取消</el-button>
            <el-button type="primary" @click.native="editSubmit1" :loading="editLoading">提交</el-button>
        </div>
    </el-dialog>
</div>
<script type="text/javascript">
    var app = new Vue({
        el: '#app',
        data: {
            message: '菜单管理',
        },
    });

    var tableView = new Vue({
        el: '#tableView',
        data: {
            dataTree: [],

            defaultProps: {
                 pid:'',
                 children: 'children',
                 label: 'label'
            },
            searchForm:{

            },
            //列表数据
             tableData: [],
            //显示加载中样式
             loading:false,

            //多选值
             multipleSelection: [],
            //当前页
             currentPage:1,
            //分页大小
             pageSize:10,
            //总记录数
             total:800,
            //删除的弹出框
             deleteVisible:false,
            //编辑界面是否显示
             editFormVisible:false,
             editFormVisible2:false,
             editFormVisible3:false,
             editLoading: false,
             goUrl:'',
             editFormRules: {
                name: [
                    { required: true, message: '请输入菜单名称', trigger: 'blur' }
                ],
                url:[
                    { required: true, message: '请输入菜单路径', trigger: 'blur' }
                ]
            },
            editForm: {
                name:'',
                url:'',

            },
            editForm1: {
                id:'',
                name:'',


            },

        },
        //数据加载
        created: function(){

            var self= this;
            axios.post('/tree/list').then(function (response) {
                //alert(JSON.response.data);
                self.dataTree=response.data;
            })
        },
        methods:{

            loadingData(){//初始化页面数据
                var self= this;
                axios.post('/tree/list').then(function (response) {
                    self.dataTree=response.data;
                })
            },

            handleNodeClick: function (data) {

                var url = data.url;
                var title =data.label;
                var content =  "<iframe src='"+url+"' frameborder=\"no\" scrolling=\"no\"  style=\"width:100%;height:780px;\"> </iframe>";
                if (url!=null&&url!='null'&&url!=''){
                    //alert(url);
                    this.addTab(content,title);
                }
            },
            //添加子项目
            append(data) {
                //alert(JSON.stringify(data));
                var id=data.id;
                //alert(id);
                var _self = this;
                _self.editForm.pid=id;
                this.goUrl="/tree/addErJi";
                this.editFormVisible2 = true;//弹出层，让隐藏的弹出层显示
                _self.dataTree = response.data;

                _self.loadingData();//重新加载数据

            },
            //表格清空事件
            qingkong:function(){
                this.editForm.name=null;
            },
           // 删除事件
            remove(node, data) {
                var _self = this;
                this.$confirm('确认删除吗?', '提示', {
                    type: 'warning'
                }).then(function(){
                    var  url="/tree/del?id="+data.id;
                    axios.get(url).then(function (response) {
                        //alert(response.data);
                        if(response.data>0){
                            _self.$message({
                                message:'删除成功',
                                type: 'success'
                            });
                            _self.loadingData();//重新加载数据
                        }
                    });
                }).catch(function(e){
                    if(e != "cancel")
                        console.log("出现错误：" + e);
                });
            },

            //修改事件
            editClick(row) {
                var self=this;
                //alert(JSON.stringify(row));
                var name = row.label;
                //alert(name);
                var id  = row.id;
                var  url=row.url;
                //alert(id);
                self.editForm1.id=id;
                self.editForm1.name=name;
                self.editForm1.url=url;
                this.goUrl="/tree/updateErji";
                this.editFormVisible3 = true;
                /* this.editForm1 = Object.assign({}, row); */
            },

            //新建一级菜单
            addOneMenuClick:function() {
                this.editForm.name=null;
               // alert(111);
                this.goUrl="/tree/add";
                var _self = this;
                this.editFormVisible = true;//弹出层，让隐藏的弹出层显示
               _self.loadingData();//重新加载数据

            },
            //添加保存点击事件
            editSubmit:function(){
                var _self = this;
                _self.loading = true;
                var formData =this.editForm;
                //alert(formData);
                var goUrl=this.goUrl;
                //alert(goUrl);
                //alert(JSON.stringify(formData));
                axios.post(goUrl,formData).then(function(response){
                    // console.log(response.data);

                    // self.total=response.data.total;
                    if(response.data>0){
                        _self.editFormVisible = false;// 让弹出层隐藏
                        _self.editFormVisible2 = false;// 让弹出层隐藏
                        _self.editFormVisible3 = false;// 让弹出层隐藏
                        _self.loadingData();
                        //alert(222);
                    }
                })
                //alert(22112);
                _self.loadingData();//重新加载数据
                console.info(this.editForm);
            },
            //修改菜单保存点击事件
            editSubmit1:function(){
                var _self = this;
                _self.loading = true;
                var formData =this.editForm1;
                //alert(formData);
                var goUrl=this.goUrl;
                //alert(goUrl);
                //alert(JSON.stringify(formData));
                axios.post(goUrl,formData).then(function(response){
                    // console.log(response.data);
                    // alert(222);
                    // self.total=response.data.total;
                    if(response.data>0){
                        _self.editFormVisible3 = false;// 让弹出层隐藏
                        _self.qingkong();
                        _self.loadingData();//重新加载数据
                    }
                })
                console.info(this.editForm1);
            }
        }

    })
</script>

</body>
</html>
